<template>
  <van-nav-bar
    title="登录"
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
  />

  <van-form @submit="store.submit($route)">
    <van-cell-group inset>
      <van-field
        v-model="username"
        maxlength="11"
        placeholder="请输入手机号码"
        :rules="[{ required: true, message: '请填写手机号码' }]"
      />

      <van-field
        v-model="password"
        maxlength="5"
        type="password"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button
        :disabled="isDisabled"
        :loading="loading"
        round
        block
        type="primary"
        native-type="submit"
      >
        登录
      </van-button>
    </div>

    <van-cell-group inset title="去注册">
      <van-cell title="快速注册" is-link to="/register/step-1" />
    </van-cell-group>
  </van-form>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useUseStore } from "@/stores/user";

const store = useUseStore();
const { username, password, isDisabled, loading } = storeToRefs(store);
</script>
